<template>
  <div class="rightNav" v-if="tableVisible" ref="rightNav">
    <el-tabs class="components-layout-right" type="card" v-model="activeName">
      <el-tab-pane label="数据" name="type1">
        <el-form
            layout="horizontal"
            class="rightNav-form"
            label-width="80px"
            label-position="left"
            v-if="selectInfo.shape === 'edge'"
        >
          <el-form-item label="颜色选择">
            <el-input
                size="small"
                controls-position="right"
                @input="childInputChange"
            />
          </el-form-item>
        </el-form>
        <el-form
            layout="horizontal"
            class="rightNav-form"
            label-width="80px"
            label-position="left"
            v-if="selectInfo.shape === 'svgNode'"
        >
          <el-form-item label="设备名称">
            <el-input
                size="small"
                controls-position="right"
                v-model="selectInfo.data.name"
                @input="childInputChange"
            />
          </el-form-item>
          <el-form-item label="设备Guid">
            <el-input
                size="small"
                controls-position="right"
                v-model="selectInfo.data.guid"
                @input="childInputChange"
            />
          </el-form-item>
          <el-form-item label="数据列表">
            <el-button type="primary" @click="addTableList">
              添加
            </el-button>
          </el-form-item>
        </el-form>
        <el-form
            layout="horizontal"
            class="rightNav-form"
            label-width="1.5rem"
            label-position="left"
            v-if="selectInfo.shape === 'table'"
        >
          <el-form-item label="数据列表"></el-form-item>
          <el-table :data="TableData" height="400px">
            <el-table-column prop="key" width="70">
              <template slot-scope="scope">
                <input type="text" v-model="scope.row.key" v-show="scope.row.isEditor" />
                <span v-show="!scope.row.isEditor">{{scope.row.key}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="value" width="60">
              <template slot-scope="scope">
                <input type="text" v-model="scope.row.value" v-show="scope.row.isEditor" />
                <span v-show="!scope.row.isEditor">{{scope.row.value}}</span>
              </template>
            </el-table-column>
            <el-table-column width="70">
              <template slot-scope="scope">
                <el-button type="warning" size="mini" @click="edit(scope.row)">编辑</el-button>
              </template>
            </el-table-column>
            <el-table-column width="70">
              <template slot-scope="scope">
                <el-button type="danger" size="mini" @click="save(scope.row)">保存</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div class="editTableRow">
            <el-button type="danger" @click="deleteTableRow">删除行</el-button>
            <el-button type="primary" style="margin-right: 20px" @click="addTableRow">添加行</el-button>
          </div>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="关联" name="type2">
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
import ajax from "@/utils/ajax";
import tableNode from "@/pages/admin/components/antV-vue-shape/tableNode.vue";
export default {
  props: ["svgInfo", "tableData", "edgeInfo"],
  components: {tableNode},
  data() {
    return {
      selectInfo: null,
      nodeInfo: null,
      TableData: null,
      EdgeInfo: null,
      activeName: 'type1',
      tableWidth: '',
      rightNav: '',
      //显隐
    }
  },
  watch: {
    svgInfo() {
      this.selectInfo = this.svgInfo
      this.nodeInfo = this.svgInfo.data
    },
    tableData() {
      this.TableData = this.tableData
    },
    edgeInfo() {
      this.EdgeInfo = this.edgeInfo.store.data.attrs.line
    },
    tableVisible(){

    },
    deep: true
  },
  mounted() {
  },
  computed:{
    tableVisible() {
      if(this.selectInfo){
        return true
      }
      else {
        return false
      }
    }
  },
  methods: {
    childInputChange() {
      this.$emit('getRightData', this.selectInfo, this.EdgeInfo)
    },
    addTableList() {
      this.$emit('addTable', this.selectInfo)
    },
    edit(row) {
      row.isEditor = true;
    },
    save(row) {
      row.isEditor = false;
    },
    addTableRow() {
      this.tableData.push({
        key: '数据名',
        value: '数据',
        isEditor: false
      },)
    },
    deleteTableRow() {
      if (this.tableData.length !== 0) {
        this.tableData.pop()
      }
    }
  },
}
</script>
<style scoped lang="less">
.components-layout-right {
  .ant-tabs-bar {
    margin-bottom: 0 !important;
  }
  .ant-form-item-label {
    width: 100px !important;
    flex-shrink: 0;
  }
  .ant-input-number,
  input {
    width: 160px;
    border-radius: 4px;
    border-color: #ddd;
  }
  .ant-form-item-control {
    line-height: 24px !important;

    p {
      margin-bottom: 0 !important;
    }
  }

  .ant-form-item {
    display: flex;
    align-items: center;
    flex-flow: nowrap;
    position: relative;
    margin-bottom: 0;
    padding: 8px 0;

    &:after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 15px;
      right: 15px;
      bottom: 0;
      height: 1px;
    }

    &:last-child::after {
      content: unset;
    }
  }
}
.btn-sure {
  width: 260px;
  // margin: 20px;
}
.bg-code {
  background: #444;
  color: #fff;
  width: calc(100% - 20px);
  margin: 20px 10px;
  border-radius: 4px;
  padding: 10px;
}
.rightNav {
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: auto;
  box-sizing: border-box;
  padding: 10px 10px;
}
::v-deep.rightNav-form .el-form-item__label,
::v-deep.rightNav-form .el-checkbox,
::v-deep.rightNav-form .is-checked + .el-checkbox__label {
  color: #fff;
}
::v-deep.el-tabs--card > .el-tabs__header .el-tabs__item {
  color: #fff;
}
::v-deep.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  border-bottom-color: #fff;
  background: #fff;
  color: #409eff;
}

.components-layout .header-row {
  margin-top: 0.05rem;
  margin-left: 0.1rem;
}
.editTableRow{
  display: flex;
  margin-top: 20px;
  flex-direction: row-reverse;
}
/deep/ .el-table__header{
  display: none;
}
</style>
